<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>refresh</title>
    <style>
        #form {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            background: rgba(154, 205, 50, 0.8);
            border: 5px solid rgba(217, 231, 187, 0.6);
            border-radius: 10px;
        }

        #form p {
            width: 450px;
            height: 45px;
            line-height: 45px;
            margin: 20px auto;
            background: rgba(216, 241, 164, 0.6);
            border: 5px solid rgba(217, 231, 187, 0.6);
            border-radius: 10px;
            color: #666;
            font-size: 17px;
        }

        #btn {
            width: 100px;
            height: 30px;
            background: rgba(154, 205, 50, 0.8);
            margin: 0 auto;
        }

        .inp {
            height: 30px;
            width: 250px;
            color: #111;
            border: 2px solid lightslategray;
            border-radius: 6px;
            margin-left: 30px;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <form id="form" action="">
        <p>
            用户昵称:
            <input class="inp" type="text" name="username">
        </p>
        <p>
            实际年龄:
            <input class="inp" type="text" name="age">
        </p>
        <p>
            邮件地址:
            <input class="inp" type="text" name="email">
        </p>
        <p>
            联系电话:
            <input class="inp" type="text" name="phone">
        </p>
        <p>
            用户性别：
            <input name="sex" type="radio" value="boy">boy
            <input name="sex" type="radio" value="gril">gril
        </p>
        <p>
            兴趣爱好：
            <input name="hooby" type="checkbox" value="css">css
            <input name="hooby" type="checkbox" value="html">html
            <input name="hooby" type="checkbox" value="js">js
            <input name="hooby" type="checkbox" value="jquery">jquery
            <input name="hooby" type="checkbox" value="node">node
        </p>
        <p id="btnp">
            <input id="btn" onclick="refresh()" type="button" value="保存">
        </p>
    </form>
</body>
<script src="./js/jquery.min.js"></script>
<script>
    $.getJSON('http://106.12.24.181:4019/s2?cd=?', function (data) {
        var username = $('[name=username]');
        var age = $('[name=age]');
        var email = $('[name=email]');
        var phone = $('[name=phone]');
        function refresh() {
            var data = {
                username: username.val(),
                age: age.val(),
                email: email.val(),
                phone: phone.val(),
                sex: $('[name=sex]:checked').val(),
                "hobby": []
            }
            // 回填选项框
            $('input:checkbox:checked').val(function (index, value) {
                data.hobby.push(value)
            })
            $.post('/abc', {
                getobj: JSON.stringify(data)
            }).done(function (res) {
                console.log(res);
            })
        }
        $.get('/abc', { id: 'stu' }).done(function (res) {
            username.val(res.username);
            age.val(res.age);
            email.val(res.email);
            phone.val(res.phone);
            $('[value=' + res.sex + ']').prop('checked', true);

            $.map(res.hobby, function (value) {
                $('[value=' + value + ']').prop('checked', true);
                console.log(value)
            })
        });
    })
</script>

</html>